
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v = "urn:schemas-microsoft-com:vml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>	 
    <title>easyMap JavaScript API Example: simple</title>
    <script type="text/javascript" charset="gb2312" src="http://10.106.129.25:9080/PGIS_S_TileMap/js/EzMapAPI.js"></script>
    <!--����style���ô��ǰ������ռ�"v"��ϵͳԤ�������ΪVML����-->
    <style>
      v\:* {
        BEHAVIOR: url(#default#VML)
      }
      #contentArea,#offscreenArea{
        left: 10vh!important;
        top: 30vh!important;
      }
      
      #tooltip-wrap{
        background-color: rgba(48, 47, 47, 0.6) !important;
        border-radius: 4px;
        padding: 15px;
        color: #fff;
      }

    </style>
    <script type="text/javascript">
      var _MapApp;
      var _markerFirst
      function onLoad(){
        _MapApp = new EzMap(document.getElementById("mymap"));
        _MapApp.showMapControl();
        // console.log(_MapApp.getCenterLatLng())
        _MapApp.centerAndZoom(_MapApp.getCenterLatLng(), 8);
        window.parent.postMessage("mapLoadComplete","*");

        //移动至中心
        _MapApp.gotoCenter()
        document.addEventListener("click",function(e){
          closeInfo()
        })
      }
      function setMarker(arr) {
        // console.log("arr")
        // console.log(arr)
        if(_MapApp != undefined){
          _MapApp.clearOverlays()
          _MapApp.gotoCenter()
        }
        var pIcon=new Icon();// 构造一个图标类
          pIcon.image="/marker_red.png";
          pIcon.width=30;
          pIcon.height=40;
        // 创建Marker标注，使用图标
        arr.map((item,index) => {
          if (item.latestLng != 0 && item.latestLat != 0) {
            // console.log(item.latestLng,item.latestLat)
            // console.log(_MapApp.getCenterLatLng())
            var pt = new Point(item.latestLng, item.latestLat)
            // console.log(pt)
            var marker = new Marker(pt,pIcon);// 构造一个标记叠加对象
            marker.addListener("click",function(e){
              // console.log(e)
              //阻止事件冒泡，影响点击地图关掉提示框
              marker.openInfoWindowHtml(
                '<div id="tooltip-wrap">'+
                '<p>手机号码：'+item.victimPhone+'</p>'+
                '<p>最新位置：'+item.latestLocation+'</p>'+
                '<p>经度：'+item.latestLng+'</p>'+
                '<p>纬度：'+item.latestLat+'</p>'+
                '<p>最新位置时间：'+item.latestLocationTime +'</p>'+
                '</div>'
              )
              e.stopPropagation()
              e.preventDefault()
              e.cancelBubble = true
            });// 添加点击事件的响应
            _MapApp.addOverlay(marker);// 将标记叠加对象添加到地图中
            // _markerArr.push(marker)
          }
          if (item.firstLat != 0 && item.firstLng != 0) {
            // console.log(item.latestLng,item.latestLat)
            // console.log(_MapApp.getCenterLatLng())
            var pt = new Point(item.firstLat, item.firstLng)
            // console.log(pt)
            var marker = new Marker(pt,pIcon);// 构造一个标记叠加对象
            marker.addListener("click",function(e){
              // console.log(e)
              //阻止事件冒泡，影响点击地图关掉提示框
              marker.openInfoWindowHtml(
                '<div id="tooltip-wrap">'+
                '<p>手机号码：'+item.victimPhone+'</p>'+
                '<p>入库位置：'+item.firstLocation+'</p>'+
                '<p>经度：'+item.firstLat+'</p>'+
                '<p>纬度：'+item.firstLng+'</p>'+
                '<p>入库位置时间：'+item.firstTime +'</p>'+
                '</div>'
              )
              e.stopPropagation()
              e.preventDefault()
              e.cancelBubble = true
            });// 添加点击事件的响应
            _MapApp.addOverlay(marker);// 将标记叠加对象添加到地图中
            // _markerArr.push(marker)
          }
          if(index == 0){
            //先初始化，不然第一次点击经纬度的点不出来弹框，是个坑
            _markerFirst = marker
            marker.openInfoWindowHtml('<div id="tooltip-wrap"></div>')
          }
      })
    }
    //点击列表项
    function moveTo(obj){
      // console.log(obj,_markerFirst)
      closeInfo()
      if (obj.latestLng != 0 && obj.latestLat != 0) {
        console.log("定位中心到指定经纬度")
        var pt = new Point(obj.latestLng, obj.latestLat)
        _MapApp.recenterOrPanToLatLng(pt) //地图对中移动到打点位置
        //_MapApp.pan(obj.latestLng,obj.latestLat)
      }else{
        console.log("定位中心")
        _MapApp.gotoCenter()
      }
    }
    function closeInfo(){
      if(_markerFirst != undefined){
        _markerFirst.closeInfoWindowHtml() //关掉弹框
        _markerFirst.openInfoWindowHtml('<div id="tooltip-wrap"></div>') //关掉弹框后再初始化
      }
    }
    </script>
  </head> 
  <body onload="onLoad()">
    <div id="mymap" class="map"></div>
  </body>
</html>

